<template>
	<div class="学生课程管理">
		<el-row>
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item>
					<el-input v-model="query.title" placeholder="章节名称" />
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
				<!-- 标题 -->
				<el-form-item style="margin-left: 20px;">
					<el-select v-model="name" filterable placeholder="请选择课程" @change="getByCourse">
						<el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-info" @click="courseDetile()">当前课程简介</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-table :data="result.tableData" size="mini" style="width: 100%">
				<el-table-column prop="id" label="章节ID" width="60">
				</el-table-column>
				<el-table-column label="课程ID" width="100" prop="courseId" >
				</el-table-column>
				<el-table-column prop="title" label="章节名称" width="120">
				</el-table-column>
				<el-table-column prop="videoSourceId" label="视频资源url" width="200">
					<template slot-scope="scope">
						<el-button v-if="scope.row.videoSourceId == null" type="text" size="text">--</el-button>
						<span v-else>{{scope.row.videoSourceId}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="videoOriginalName" label="原始文件名称" width="150">
					<template slot-scope="scope">
						<el-button v-if="scope.row.videoOriginalName == null" type="text" size="text">--</el-button>
						<span v-else>{{scope.row.videoOriginalName}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="duration" label="视频时长(秒)" width="90">
					<template slot-scope="scope">
						<el-button v-if="scope.row.duration == null" type="text" size="text">--</el-button>
						<span v-else>{{scope.row.duration}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="size" label="视频源文件大小(字节)" width="100">
					<template slot-scope="scope">
						<el-button v-if="scope.row.size == null" type="text" size="text">--</el-button>
						<span v-else>{{scope.row.size}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createtime" label="创建时间" width="140">
				</el-table-column>
				<el-table-column prop="updatetime" label="更新时间" width="140">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button v-if="scope.row.videoOriginalName == null" type="primary" size="mini" icon="el-icon-s-promotion"
						 @click="uploadVideo(scope.row.id)">上传视频</el-button>
						<el-button v-else type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-pagination style="margin-top:20px;" background layout="prev, pager, next" :page-count="result.pages"
		 :current-page.sync="query.pageNo" :page-size="query.pageSize" @current-change="getList()">
		</el-pagination>
		<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" width="800px">
			<courseDetile v-if="show" :show.sync="show" :courseId="name"></courseDetile>
		</el-dialog>
		<el-dialog :title="title2" :visible.sync="show2" :close-on-click-modal="false" width="500px">
			<Upload v-if="show2" :show.sync="show2" @getData="getList()" :editid="editid"></Upload>
		</el-dialog>
	</div>
</template>
<script>
	import Upload from "./upload.vue"
	import courseDetile from "./courseDetile.vue"
	import axios from "@/utils/axiosutils.js"
	import Message from 'element-ui'
	export default {
		name: 'projectclass',
		data() {
			return {
				title: "",
				name: '',
				show: false,
				title2: "上传视频",
				show2: false,
				editid: "",
				options: [],
				className: '',
				courseName: '',
				cId:'',
				query: {
					title: '',
					pageNo: 1,
					pageSize: 6
				},
				courseQuery: {
					courseId: 0,
					pageNo: 1,
					pageSize: 6
				},
				result: {
					tableData: [], //查询成功返回数据
					pages: 0
				},
			};
		},
		components: {
			courseDetile,
			Upload
		},
		created() {
			this.getList();
			this.item();
		},
		methods: {
			getList() {
				axios.post("video/videoList", resp => {
					this.result.tableData = resp.obj.records
					this.result.pages = resp.obj.pages
				}, this.query)
			},
			selectSource() {
				this.title = "选择课程"
				this.show = true;
			},
			item() {
				axios.post("course/courseItem", resp => {
					this.options = resp.obj;
				})
			},
			getByCourse(val) {
				this.courseQuery.courseId = val;
				axios.post("video/getByCourse", resp => {
					this.result.tableData = resp.obj.records
					this.result.pages = resp.obj.pages
				}, this.courseQuery)
			},
			courseDetile() {
				if (this.name == "") {
					this.$message('还没有选择课程哦')
				} else {
					this.show = true
				}
			},
			uploadVideo(id) {
				this.editid = id;
				this.show2 = true
			},
			del(id) {
				axios.post("/video/del",resp=>{
					this.$message.success("视频已经删除");
					this.getList()
				},{id:id})
			}
		}
	}
</script>
<style scoped>
</style>
